<template>
  <div class="LicenseInformationSJY_a">
    <div class="pubBig standard">
      <div class="h0 dd">
        <p class="lt"></p>
      </div>
      <div class="dDownMain">
        <div
          class="twoBox"
          :style="this.$route.query.Token ? 'top:50px;left:10px' : 'top: 100px'"
        >
          <div style="margin: 10px">
            <el-input
              placeholder="请输入关键字"
              size="mini"
              v-model="input_search"
              style="width: 20%; margin-right: 10px"
            ></el-input>
            <el-button
              icon="el-icon-search"
              size="small"
              @click="(pages.page = 1), input_search_btn()"
            ></el-button>
            <el-button
              icon="el-icon-plus"
              size="small"
              @click="add_clock"
            ></el-button>
            <el-button plain size="small" @click="exportLog"
              >Excel导出</el-button
            >
            <el-button type="text" style="float: right" @click="Excel_out"
              >Excel模板</el-button
            >
            <el-upload
              style="display: inline-block"
              class="ensure ensureButt"
              :limit="limitNum"
              :auto-upload="false"
              accept=".xlsx"
              :action="UploadUrl()"
              :before-upload="beforeUploadFile"
              :on-change="fileChange"
              :on-exceed="exceedFile"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :on-error="handleError"
              :file-list="fileList"
            >
              <el-button
                size="small"
                style="margin-left: 10px"
                v-loading.fullscreen.lock="fullscreenLoading"
                >Excel导入</el-button
              >
            </el-upload>
          </div>
          <template>
            <el-table
              v-loading="isLoading"
              :data="tableData"
              style="width: 100%"
              height="600"
            >
              <el-table-column
                type="index"
                :index="
                  (index) => {
                    return pages.limit * (pages.page - 1) + index + 1;
                  }
                "
                label="序号"
                width="90"
              >
              </el-table-column>
              <el-table-column prop="OIDCode" label="OID编码">
              </el-table-column>
              <el-table-column prop="OIDName" label="OID名称">
              </el-table-column>
              <el-table-column prop="FileCode" label="文件编码" width="180">
              </el-table-column>
              <el-table-column prop="FileName" label="文件名称">
              </el-table-column>
              <el-table-column prop="Code" label="值代码"> </el-table-column>
              <el-table-column prop="Name" label="值说明"> </el-table-column>
              <el-table-column prop="Version" label="版本号"> </el-table-column>
              <el-table-column prop="CreateTime" label="创建时间">
                <span slot-scope="scope">
                  {{ scope.row.CreateTime | dateFormat }}
                </span>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    icon="el-icon-edit"
                    size="mini"
                    @click="item_edit(scope.row)"
                  ></el-button>
                  <el-button
                    icon="el-icon-delete"
                    size="mini"
                    @click="item_del(scope.row.Id)"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="block" style="text-align: center">
              <el-pagination
                layout="prev, pager, next"
                :total="total"
                :page-size="pages.limit"
                @current-change="page_change"
                :current-page="pages.page"
              >
              </el-pagination>
            </div>
          </template>
          <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            width="40%"
            :before-close="handleClose"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
          >
            <div>
              <el-form
                label-position="right"
                label-width="80px"
                :model="formLabelAlign"
              >
                <el-form-item
                  label="*OID编码"
                  style="display: inline-block; width: 50%"
                >
                  <el-input v-model="formLabelAlign.OIDCode"></el-input>
                </el-form-item>
                <el-form-item
                  label="*OID名称"
                  style="display: inline-block; width: 50%"
                >
                  <el-input v-model="formLabelAlign.OIDName"></el-input>
                </el-form-item>
                <el-form-item
                  label="*文件编码"
                  style="display: inline-block; width: 50%"
                >
                  <el-input v-model="formLabelAlign.FileCode"></el-input>
                </el-form-item>
                <el-form-item
                  label="*文件名称"
                  style="display: inline-block; width: 50%"
                >
                  <el-input v-model="formLabelAlign.FileName"></el-input>
                </el-form-item>
                <el-form-item
                  label="*值代码"
                  style="display: inline-block; width: 50%"
                >
                  <el-input v-model="formLabelAlign.Code"></el-input>
                </el-form-item>
                <el-form-item
                  label="*值说明"
                  style="display: inline-block; width: 50%"
                >
                  <el-input v-model="formLabelAlign.Name"></el-input>
                </el-form-item>
                <el-form-item
                  label="*版本号"
                  style="display: inline-block; width: 50%"
                >
                  <el-input v-model="formLabelAlign.Version"></el-input>
                </el-form-item>
              </el-form>
            </div>
            <el-button
              type="primary"
              style="float: right; margin-top: -20px; margin-left: 10px"
              @click="add2"
              >保存</el-button
            >
            <el-button
              style="float: right; margin-top: -20px"
              @click="handleClose"
              >关闭</el-button
            >
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { exportExcelMethod } from "@/utils";
import axios from "axios";
export default {
  data() {
    return {
      tableData: [],
      pages: {
        page: 1,
        limit: 10,
      },
      total: null,
      input_search: "",
      dialogVisible: false,
      formLabelAlign: {
        FileCode: "",
        FileName: "",
        Code: "",
        Name: "",
        Version: "",
      },
      title: "添加",
      isLoading: false,
      fileList: [],
      limitNum: 1, // 上传excell时，同时允许上传的最大数
      isInfor: false,
      fullscreenLoading: false,
    };
  },
  methods: {
    getTable() {
      // 获取表格数据
      this.isLoading = true;
      let query = this.pages;
      // this.$post("PlatformRange/PageList?page=" + query.page + "&limit=" + query.limit, query).then(res => {
      this.$post(
        "PlatformRange/PageList?keyword=" +
          this.input_search +
          "&page=" +
          query.page +
          "&limit=" +
          query.limit,
        query
      )
        .then((res) => {
          if (res.code == 0) {
            this.tableData = res.data.list;
            this.total = res.data.TotalCount;
            this.isLoading = false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    page_change(val) {
      // 表格页码切换事件
      this.pages.page = val;
      this.getTable();
    },
    input_search_btn() {
      // 搜索按钮事件
      let query = this.pages;
      this.$post(
        "PlatformRange/PageList?keyword=" +
          this.input_search +
          "&page=" +
          query.page +
          "&limit=" +
          query.limit,
        query
      )
        .then((res) => {
          if (res.code == 0) {
            this.tableData = res.data.list;
            this.total = res.data.TotalCount;
          } else if (res.code == -1) {
            this.$message({
              message: res.msg,
              type: "warning",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    add_clock() {
      // 添加按钮事件
      this.title = "添加";
      this.dialogVisible = true;
    },
    handleClose() {
      // 弹层关闭
      (this.formLabelAlign = {
        FileCode: "",
        FileName: "",
        Code: "",
        Name: "",
        Version: "",
      }),
        (this.dialogVisible = false);
    },
    add2() {
      // 弹层确定按钮操作事件
      if (
        this.formLabelAlign.OIDCode == null ||
        this.formLabelAlign.OIDCode == "" ||
        this.formLabelAlign.OIDName == null ||
        this.formLabelAlign.OIDName == "" ||
        this.formLabelAlign.FileCode == null ||
        this.formLabelAlign.FileCode == "" ||
        this.formLabelAlign.FileName == null ||
        this.formLabelAlign.FileName == "" ||
        this.formLabelAlign.Code == null ||
        this.formLabelAlign.Code == "" ||
        this.formLabelAlign.Name == null ||
        this.formLabelAlign.Name == "" ||
        this.formLabelAlign.Version == null ||
        this.formLabelAlign.Version == ""
      ) {
        this.$message.error("请完整填写必填项！ ");
        return;
      }
      var y = this.formLabelAlign.Id
        ? "PlatformRange/Update"
        : "PlatformRange/Create";
      let body = this.formLabelAlign;
      this.$post(y, body)
        .then((res) => {
          if (res.code == 0) {
            this.handleClose();
            this.getTable();
            this.$message({
              message: this.title + "成功",
              type: "success",
            });
          } else if (res.code == -1) {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.handleClose();
          console.log(err);
        });
    },
    item_edit(val) {
      // 表格编辑事件
      var info = JSON.stringify(val);
      this.formLabelAlign = JSON.parse(info);
      this.title = "修改";
      this.dialogVisible = true;
      console.log(this.formLabelAlign);
    },
    item_del(id) {
      // 表格删除事件
      this.$confirm("确定删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((_) => {
          this.$post("PlatformRange/Delete/" + id).then((res) => {
            if (res.code == 0) {
              this.getTable();
              this.$message({
                message: "删除成功",
                type: "success",
              });
            } else if (res.code == -1) {
              this.$message({
                message: res.msg,
                type: "warning",
              });
            }
          });
        })
        .catch((_) => {});
    },
    exportLog() {
      //导出
      const url = "/PlatformRange/Export";
      const data = this.tableData;
      const myObj = {
        method: "get",
        url: url,
        fileName: "标准值域",
        token: this.token,
        data: { data },
      };
      exportExcelMethod(myObj);
    },
    Excel_out() {
      // excel导出模板
      // const url = 'http://192.168.0.210:8002/TemplateFile/标准值域导入的模板.xlsx'
      const url = baseUrl.bsIp + "/TemplateFile/标准值域导入的模板.xlsx"; // 香格里拉
      const data = this.tableData;
      const myObj = {
        method: "get",
        url: url,
        fileName: "标准值域导入模板",
        token: this.token,
        data: { data },
      };
      exportExcelMethod(myObj);
    },
    // 文件超出个数限制时的钩子
    exceedFile(files, fileList) {
      this.$message.warning(
        `只能选择 ${this.limitNum} 个文件，当前共选择了 ${
          files.length + fileList.length
        } 个`
      );
    },
    // 移除前调用
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //移除时调用
    handleRemove(file, fileList) {
      this.fileList = [];
      this.fileList.length <= 0
        ? (this.isInfor = false)
        : (this.isInfor = true);
    },
    // 文件状态改变时的钩子
    fileChange(file, fileList) {
      this.fullscreenLoading = true;
      console.log(file.raw);
      this.fileList.push(file.raw);
      console.log(this.fileList);
      this.uploadFile();
      // this.isInfor = true
    },
    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUploadFile(file) {
      console.log("before upload");
      console.log(file);
      let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      let size = file.size / 1024 / 1024;
      if (extension !== "xlsx") {
        this.$message.warning("只能上传后缀是.xlsx的文件");
      }
      if (size > 10) {
        this.$message.warning("文件大小不得超过10M");
      }
    },
    // 文件上传成功时的钩子
    handleSuccess(res, file, fileList) {
      this.$message.success("文件上传成功");
      this.$refs.upload.clearFiles();
      this.isInfor = false;
    },
    // 文件上传失败时的钩子
    handleError(err, file, fileList) {
      this.$message.error("文件上传失败");
    },
    // 因为action参数是必填项，我们使用二次确认进行文件上传时，直接填上传文件的url会因为没有参数导致api报404，所以这里将action设置为一个返回为空的方法就行，避免抛错
    UploadUrl: function () {
      return "";
    },
    uploadFile() {
      var formFile = new FormData();
      console.log(this.fileList[0]);
      formFile.append("file", this.fileList[0]); //加入文件对象
      var data = formFile;
      $.ajax({
        // url: "http://192.168.0.210:8002/v1/UploadData/Api/PostAttachments?imgType=file",
        url: baseUrl.bsIp + "/v1/UploadData/Api/PostAttachments?imgType=file", // 香格里拉
        data: data,
        type: "POST",
        dataType: "json",
        cache: false, //上传文件无需缓存
        processData: false, //用于对data参数进行序列化处理 这里必须false
        contentType: false, //必须
      }).then((res) => {
        this.$post("/PlatformRange/Import?path=" + res.data.attachUrl).then(
          (res) => {
            console.log(res);
            if (res.code == 0) {
              this.fileList = [];
              this.$message({
                message: "导入成功",
                type: "success",
              });
              this.getTable();
              this.fullscreenLoading = false;
            }
          }
        );
      });
    },
  },
  created() {
    if (this.$route.query.Token) {
      localStorage.setItem("Token", this.$route.query.Token);
    }
    this.getTable();
  },
  filters: {
    dateFormat(val) {
      if (val == null || val == "") {
        return "";
      } else {
        let d = new Date(val); // val 为表格内取到的后台时间
        let month =
          d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
        let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
        let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
        let min = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
        let sec = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
        let times =
          d.getFullYear() +
          "-" +
          month +
          "-" +
          day +
          " " +
          hours +
          ":" +
          min +
          ":" +
          sec;
        return times;
      }
    },
  },
};
</script>
<style lang="scss">
.LicenseInformationSJY_a {
  .dLeftMain {
    position: absolute;
    width: 370px;
    top: 45px;
    left: 0;
    bottom: 20px;
    border-right: 1px solid #ddd;
    overflow: auto;
    padding-top: 8px;
  }

  .treeC {
    .el-tree-node.is-current > .el-tree-node__content > .custom-tree-nodefont {
      background-color: #fcf8e3 !important;
    }

    .el-tree-node.is-current > .el-tree-node__content {
      background-color: #fcf8e3 !important;
    }

    .el-tree-node__content:hover {
      background-color: #f6f6f6 !important;
    }
  }

  .cardPD {
    .text {
      font-size: 12px;
    }

    .el-card__header {
      padding: 8px 20px;
      border-bottom: 1px solid #ebeef5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      background-color: azure;
    }

    .item {
      margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }

    .clearfix:after {
      clear: both;
    }

    .box-card {
      width: 100%;
    }
  }

  .ypList {
    .el-input__inner {
      // height: 20px !important;
      padding: 0 0 0 15px !important;
    }

    .el-input__inner {
      -webkit-appearance: none;
      background-color: #fff;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      font-size: 10px !important;
      height: 40px;
      line-height: 40px;

      -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      width: 100%;
    }

    .el-autocomplete-suggestion li {
      padding: 0px 6px !important;
      margin: 0;
      line-height: 34px;
      cursor: pointer;
      color: #606266;
      font-size: 10px !important;
      list-style: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  input {
    color: #000;
  }

  .dRightMain {
    width: 960px;
    height: 855px;
    margin-left: 300px;
    padding: 20px 0 0 20px;

    p {
      clear: noth;
      height: 32px;
      margin-bottom: 10px;

      .form-control {
        width: 200px;
      }

      span {
        display: block;
        float: left;
        width: 130px;
        line-height: 32px;

        b {
          color: red;
          position: relative;
          top: 2px;
          margin-right: 10px;
          font-size: 16px;
        }
      }
    }
  }

  .column2 {
    width: 640px;

    label {
      width: 110px;
    }
  }
  .sum {
    position: absolute;
    left: 50%;
    bottom: 6%;
    transform: translateX(-50%);
  }
  input[type="file"] {
    display: none !important;
  }
  //起作用
  .file-box {
    position: relative;
  }
  .file-btn {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    outline: none;
    background-color: transparent;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
  }
  .el-upload-list {
    display: none !important;
    // display: inline-block;
    // margin-left: 10px;
  }
}
</style>
